/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
#ls-button-submit{background-color:#d20a11;}
a {color:#d20a11;}
.survey-name, .survey-description, .survey-welcome {
    margin-bottom: 2rem;
    font-family:Roboto;
}




/* ===================================================
   1. GEMEINSAME REGELN (Standard-Design im Tabellenstil)
   =================================================== */

/* Radio-Buttons unsichtbar machen */
.nps-custom-row input[type="radio"] {
  display: none !important;
}

/* Grunddesign der Kacheln */
.nps-custom-row .answers-list li,
.nps-custom-row ul.list-unstyled li {
  background-color: #f7f7f7 !important; /* Neutrales Hellgrau */
  border: 1px solid #dcdcdc !important; /* Dezenter grauer Rahmen */
  border-top-width: 4px !important;     /* Dickerer oberer Rand für die Farbe */
  transition: all 0.2s ease-in-out;
  list-style: none !important;
  user-select: none;
}

.nps-custom-row .answers-list li label,
.nps-custom-row ul.list-unstyled li label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin: 0 !important;
  width: 100% !important;
  padding: 12px 0 !important;
  font-weight: bold;
  color: #333 !important;
}

/* OBERER FARBRAND (border-top-color) */

/* Rot (Detraktoren): Auswahl 0 bis 6 (1. bis 7. Element in der Liste) */
.nps-custom-row .answers-list li:nth-child(-n+7),
.nps-custom-row ul.list-unstyled li:nth-child(-n+7) {
  border-top-color: #ff4d4f !important;
}

/* Gelb (Passive): Auswahl 7 bis 8 (8. und 9. Element in der Liste) */
.nps-custom-row .answers-list li:nth-child(n+8):nth-child(-n+9),
.nps-custom-row ul.list-unstyled li:nth-child(n+8):nth-child(-n+9) {
  border-top-color: #ffc107 !important;
}

/* Grün (Promotoren): Auswahl 9 bis 10 (10. und 11. Element in der Liste) */
.nps-custom-row .answers-list li:nth-child(n+10),
.nps-custom-row ul.list-unstyled li:nth-child(n+10) {
  border-top-color: #20c997 !important;
}


/* HOVER- UND SELEKTIONS-ZUSTAND */

/* Hover: Leichte Abdunkelung */
.nps-custom-row .answers-list li:hover,
.nps-custom-row ul.list-unstyled li:hover {
  background-color: #ebebeb !important;
}

/* Ausgewählte Kachel: Grauer Hintergrund */
.nps-custom-row .answers-list li:has(input:checked),
.nps-custom-row ul.list-unstyled li:has(input:checked) {
  background-color: #cccccc !important;
  border-color: #adadad !important;
}


/* ===================================================
   2. MOBIL-ANSICHT (width <= 768px): Untereinander
   =================================================== */
@media (max-width: 768px) {
  .nps-custom-row .answers-list,
  .nps-custom-row ul.list-unstyled {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-left: 0 !important;
  }

  .nps-custom-row .answers-list li,
  .nps-custom-row ul.list-unstyled li {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-radius: 4px !important;
  }
}


/* ===================================================
   3. DESKTOP-ANSICHT (width > 768px): Nahtlos nebeneinander
   =================================================== */
@media (min-width: 769px) {
  .nps-custom-row .answers-list,
  .nps-custom-row ul.list-unstyled {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding-left: 0 !important;
  }

  .nps-custom-row .answers-list li,
  .nps-custom-row ul.list-unstyled li {
    flex: 1 1 0px !important;
    margin: 0 !important;
    margin-left: -1px !important; /* Lässt die seitlichen Rahmen ineinandergreifen */
    text-align: center !important;
  }

  /* Abrundung an den äußeren Ecken */
  .nps-custom-row .answers-list li:first-child,
  .nps-custom-row ul.list-unstyled li:first-child {
    margin-left: 0 !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }

  .nps-custom-row .answers-list li:last-child,
  .nps-custom-row ul.list-unstyled li:last-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
}